<template>
    <!--使用mui中的图片表格-->
    <div id="templ">
        <div  id="mui-content" class="mui-content" style="background-color:#fff">
            <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item,index) in imglist " :key="index">
                    <router-link  v-bind="{to:'/goods/goodsinfo/'+item.id}">
                        <img class="mui-media-object" :src="item.img_url">
                        <div class="mui-media-body">{{item.title}}</div>
                        <div class="desc">
                              <p><span>￥{{item.sell_price}}</span> <s>￥{{item.market_price}}</s></p>
                              <div>
                                  <span class="left">热卖中</span>
                                  <span class="right">剩{{item.stock_quantity}}件</span>
                              </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
        <!--按钮-->
        <mt-button type="danger" size="large" plain @click ="getmore">加载更多</mt-button>
    </div>
</template>
<script>
    import common from '../../kits/common';
    import { Toast } from 'mint-ui';
  export default {
      data(){
          return{
              imglist:[],//存储图片的列表信息
              pageindex:1
          }
      },
      created(){
         this.getimgs(this.pageindex);
      },
      methods:{
          getimgs(pageindex){
             pageindex =pageindex ||1;
             var url = common.apidomain+"/api/getgoods?pageindex="+pageindex;
             this.$http.get(url).then(function (response) {
                 var body = response.body;
                 if(body.status !=0){
                     Toast(body.message);
                     return;
                 }
                 if(pageindex ==1){
                     this.imglist=body.message;
                 }else{
                     this.imglist= this.imglist.concat(body.message);
                 }

             })
          },
          getmore(){
              this.pageindex++;
              this.getimgs(this.pageindex);
          }
      }
  }
</script>
<style scoped>
/*图片列表的页面*/
   #mui-content li{
       border:1px solid rgba(0,0,0,0.8);
       box-shadow: 0 0 4px #000;
       padding: 2px;
       margin-left: 4px;
   }
    #mui-content li a{
        padding-left: 0px;
        margin-left:0px;
    }
    .desc{
        height: 60px;
        background-color: rgba(0,0,0,0.2);
        text-align: left;
        padding:5px;
        position: relative;
    }
    .desc p span{
        color: red;
        margin-right: 15px;
    }
    .desc .left{
        position: absolute;
        left:10px;
        bottom: 2px;
        color: rgba(0,0,0,0.6);
    }
    .desc .right{
        position: absolute;
        right: 10px;
        bottom: 2px;
        color: rgba(0,0,0,0.6);
    }
</style>